<template>
	<div class="bodys">
		<div class="nav">
			<navbar></navbar>
		</div>
	  <div class="publis">
	  	<h3>发布</h3>
		 <div class="publis-form">
		 	<form >
		 		<div class="pf">
		 			 <div class="pf-1">
				<img src="../assets/img/Path 7.png" height="10px"/>
				<span >
				 标题
				</span>
			</div>
			<input type="text" placeholder="请输入标题" v-model="istitle"/>
		 </div>
			   <div >
			   	  <div class="pf-1">
				<img src="../assets/img/Path 7.png" height="10px"/>
				<span >
				 正文
				</span>
			</div>
			<textarea name="" placeholder="请输入正文" v-model="tex"></textarea>
			   </div>
			
			<div class="bq">
				<div >
					<img src="../assets/img/Path 7.png" height="10px"/>
				<span >
				  选择标签
				</span>
				</div>
				<div>
                   <a href="javascript:;" v-for="(item,index) in labellist" @click='labLis(index)'  v-bind:class="{ 'active':ide === index }">{{item.name}}</a>
                </div>
			</div>
			<div>
				<el-radio v-model="radio" label="0"><span>
					作为操盘日记发布
				</span></el-radio>
			</div>
			<input type="button" name="" class="button" value="确认发布" @click="getRelease" />
		</form>
	  </div>  	
   </div>  
       <message></message>
	    <floot></floot>
	</div>
	
	    
</template>

<script>
	import navbar from '@/components/compon/navbar';
	import floot from '@/components/compon/floot';
	import message from '@/components/compon/message';
	export default {
		components: {
			navbar,
			floot,
			message
		},
		data () {
      return {
        radio: '1',
        istitle:'',
        tex:'',
        ide:'',
        labellist:[
        {name:'区块链'},{name:'区块链'},{name:'区块链'},{name:'区块链'},{name:'区块链'},{name:'区块链'},{name:'区块链'},{name:'区块链'}
        ]
         }
       },
		methods:{
			 labLis(index){
			 	this.ide = index
			 },
			 getRelease(){
			 	
			 }
		}
	}
</script>

<style scoped>
.bodys{
	background-color: #e5e5e5;
	width: 100%;
}
.bodys .nav{
	width: 100%;
	background-color: #FFFFFF;
}
	 .publis{
	 	width: 80%;
	 	margin: 60px auto;
	 	
	 }
	 .publis h3{
	 	height: 70px;
	 	text-align: center;
	 	line-height: 70px;
	 	font-size: 22px;
	 	color: #FFFFFF;
	 	background-image: linear-gradient(-270deg, #6894FA 0%, #645CF3 100%);
        background-image: linear-gradient(-90deg, #9354F5 0%, #6792F9 100%);
        border-radius: 10px 10px 0 0;
	 }
	 .publis-form{
	 	background-color: #eff8ff;
	 }
	 .publis-form div{
	 	margin-top: 20px;
	 }
	 .publis-form form{
	 	width: 80%;
	 	margin: 0 auto;
	 	overflow: hidden;
	 	
	 }
	 .publis-form input{
	   box-sizing: border-box;
	   background: #FFFFFF;
       border: 1px solid #4290CF;
       width: 99%;
       height: 30px;
       line-height: 30px;
       display: block;
       padding-left: 10px;
	 }
	 .publis-form textarea{
	 	box-sizing: border-box;
	 	padding-top: 10px;
	 	width: 98%;
	 	height: 300px;
	    padding-left: 10px;
	 }
	 .publis-form  .button{
	 	border: 1px solid #245DBD;
	 	background: #245DBD;
        border-radius: 10px;
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #ffffff;
        box-sizing: border-box;
        margin: 30px 0;
        float: right;
        outline: none;
	 }
	 .pf{
	 	margin-bottom: 40px;
	 }
	 .pf-1{
	 	margin-bottom: 20px;
	 }
	 .bq {
	 	margin: 30px 0;
	 }
	 .bq  a{
        height: 30px;
        display: inline-block;
        text-align: center;
        line-height: 30px;
        border: 1px #50caff solid;
        border-radius: 42px;
        margin: 5px 5px;
        padding: 0 25px;
        font-size: 12px
	 }
	 .bq .active{
	 	background-color: #50caff;
	 	color: #FFFFFF;
	 }
	 .publis-form span{
	 	font-size: 16px;
	 }
</style> 